<template>
    <div class="footer">
        <van-tabbar v-model="active" class="active_tab">
            <van-tabbar-item
                v-for="(item,index) in tabbars"
                :key="index"                
                :to="(item.name)"
                >
                <span :class="currIndex == index ? active:''">{{item.title}}</span>
                <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
export default {
    name:'navigate',
    components:{
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
    },
    data(){
        return{
            currIndex: 0,
            active: 0,
            tabbars: [
                {
                    name: "/",
                    title: "店铺",
                    normal: require("../../assets/images/tabbar/tabbar_home_nor.jpg"),
                    active: require("../../assets/images/tabbar/tabbar_home_sel.jpg")
                },
                {
                    name: "report",
                    title: "运营报表",
                    normal: require("../../assets/images/tabbar/tabbar_sort_nor.jpg"),
                    active: require("../../assets/images/tabbar/tabbar_sort_sel.jpg")
                },
                {
                    name: "user",
                    title: "我的",
                    normal: require("../../assets/images/tabbar/tabbar_profile_nor.jpg"),
                    active: require("../../assets/images/tabbar/tabbar_profile_sel.jpg")
                },
            ]
        }
    },
    created() {
        if (this.$route.name == "") {
            this.active = 0;
        } else if (this.$route.name == "report") {
            this.active = 1;
        } else if (this.$route.name == "user") {
            this.active = 2;
        }
    },
    methods: {
        
    }
   
}
</script>
<style lang="less" scoped>
    .active_tab img {
        width: 0.533333rem;
        height: 0.533333rem;
    }
    .van-tabbar-item {
        font-size: 0.4rem;
    }
    .van-tabbar-item--active {
        color: #e10f02;
    }
</style>

